<template>
	<div class="padding-across-10" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<headerOpreate style="padding-bottom: 5px;float: left;width: 100%" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div style="width: 100%;float: left">
			<el-row>
				<el-col :span="6" style="float: left;padding-top: 5px">
					<div class="grid-content bg-purple">
						<p style="font-size: 13px;margin-top: 2px;float: left;font-weight: bold">审核状态</p>
						<el-radio-group style="margin-left: 2px" v-model="status" @change="selectStatus">
							<el-radio :label="1">未审核</el-radio>
							<el-radio :label="2">已审核</el-radio>
						</el-radio-group>
					</div>
				</el-col>
				<el-col :span="18">
					<div class="block" style="text-align:right;float: right;padding-bottom: 2px">
						<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="selection"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="标题" align="center" prop="ResourceName"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="发布内容" align="center" prop="Content"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="应用设备" align="center" prop="Sn"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="创建时间" align="center" prop="CreateTime"></el-table-column>
			<!--<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.IsAudited" type="success">已审核</el-tag>
					<el-tag v-else type="danger">未审核</el-tag>
				</template>
			</el-table-column>-->
			<el-table-column :show-overflow-tooltip="true" v-if="status === 2" label="审核时间" align="center" prop="AuditedTime"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center" width="180px">
				<template slot-scope="scope">
					<el-button size="small" type="primary" @click="auditedText(scope.row)"><i class="fa fa-check"></i>&nbsp;{{scope.row.IsAudited ? '应用' : '审核并应用'}}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 2px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<!-- 新建广告 -->
		<el-dialog title="新建显示广告" v-model="createAdDialog" :class="[dialog-small-width]">
			<el-form id="form" ref="createForm" :model="createForm" :rules="createRules" label-width="80px">
				<el-form-item label="应用设备" prop="devices">
					<el-select style="width: 100%" v-model="createForm.devices" multiple placeholder="请选择">
						<el-option v-for="item in deviceDatas" :key="item.sn" :label="item.name" :value="item.sn">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标题" prop="title">
					<el-input placeholder="请输入标题" v-model="createForm.title" required></el-input>
				</el-form-item>
				<el-form-item label="发布内容" prop="text">
					<el-input type="textarea" :rows="3" placeholder="请输入发布内容" v-model="createForm.text" required></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createAdDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmCreateAd('createForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import headerNave from '../../../../components/headerNave'
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	export default {
		components: {
			headerNave,
			headerOpreate
		},
		data() {
			var create_checkText = (rule, value, callback) => {
				if(this.createForm.text === '') {
					callback(new Error('广告内容不能为空'));
				} else if(this.createForm.text.length > 36) {
					callback(new Error('广告内容不能超过36个字符'));
				} else {
					callback();
				}
			};
			var create_checkTitle = (rule, value, callback) => {
				if(this.createForm.title === '') {
					callback(new Error('文本标题不能为空'));
				} else {
					callback();
				}
			};
			var create_checkDevice = (rule, value, callback) => {
				if(this.createForm.devices.length === 0) {
					callback(new Error('请选择应用设备'));
				} else {
					callback();
				}
			};
			return {
				loading: false,
				status: 1,
				audited: false,
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				deviceDatas: [],
				createAdDialog: false,
				createForm: {
					title: '',
					text: '',
					devices: []
				},
				createRules: {
					title: [{
						validator: create_checkTitle,
						required: true,
						trigger: 'blur'
					}],
					text: [{
						validator: create_checkText,
						required: true,
						trigger: 'blur'
					}],
					devices: [{
						validator: create_checkDevice,
						required: true,
						trigger: 'blur'
					}]
				},
				opreateDatas: [{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: '刷新',
						action: 'reloadDatas'
					},
					{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-plus el-icon--left',
						name: '添加',
						action: 'addText'
					},
					{
						show: GloabFun.getUid() == 'admin' ? true : false,
						size: "small",
						type: "danger",
						icon: "el-icon-delete2 el-icon--left",
						name: "删除",
						action: "multipleDeleteMedia"
					}
				]
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			formateSelection() {
				var result = [],
					array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].ResourceKeyId);
				}
				return result;
			},
			//获取所有设备，并选出三代微图
			getAllWTDevices() {
				HttpServer.httpPost.call(this, '/Api/Device/Info', {category: ['WeiTu']}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.deviceDatas = response.data.deviceinfo;
						// this.deviceDatas = [];
						// let vm = this;
						// response.data.deviceinfo.forEach(function(item) {
						// 	if(item.model === 'WT01-02A') {
						// 		vm.deviceDatas.push(item)
						// 	}
						// })
					}
				});
			},
			//新建广告文本
			addText() {
				this.getAllWTDevices();
				this.createForm = {
					title: '',
					text: '',
					devices: []
				};
				this.createAdDialog = true;
			},
			//确认创建文本
			confirmCreateAd(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						var param = {
							type: 0,
							resourcename: this.createForm.title,
							content: this.createForm.text,
							sn: this.createForm.devices.join()
						}
						HttpServer.httpPost.call(this, '/Api/LedResource/Add', param, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$notify({
									title: '成功',
									message: this.$t('message.addSuccess'),
									type: 'success',
									duration: 2500
								});
								this.createAdDialog = false;
								this.getDatas();
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					} else {
						return false;
					}
				});
			},
			//选择状态信息
			selectStatus() {
				if(this.status === 1) {
					this.audited = false;
					this.getDatas();
				} else {
					this.audited = true;
					this.getDatas();
				}
			},
			//审核文件
			auditedText(row) {
				var text = '';
				if(row.IsAudited) {
					text = '该操作将此广告应用到指定设备，是否继续？';
				} else {
					text = '该操作将通过对此广告的审核并应用到指定设备，是否继续？';
				}
				this.$confirm(text, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true;
					var auditedParam = {
						keyId: [row.ResourceKeyId]
					}
					HttpServer.httpPost.call(this, '/Api/LedResource/AuditedResource', auditedParam, function(response) {}, function(response) {
						//						console.log(response)
						this.loading = false;
						if(response.data.code === 0) {
							this.getDatas();
							this.$notify({
								title: '成功',
								message: '操作成功',
								type: 'success',
								duration: 2500
							});
						} else {
							this.getDatas();
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				})
			},
			multipleDeleteMedia() {
				// console.log(this.formateSelection())
				if(this.formateSelection().length > 0) {
					this.$confirm('此操作将删除此广告资源，是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.loading = true;
						var deleteParam = {
							keyId: this.formateSelection()
						}
						HttpServer.httpPost.call(this, '/Api/LedResource/delete', deleteParam, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.deleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.getDatas();
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					})
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			//去掉时间中的T
			formateData(array) {
				for(var i = 0; i < array.length; i++) {

					var index1 = array[i].CreateTime.indexOf("T");
					var index2 = array[i].AuditedTime.indexOf("T");
					array[i].CreateTime = array[i].CreateTime.substring(0, index1) + " " + array[i].CreateTime.substring(index1 + 1, index1 + 9);
					array[i].AuditedTime = array[i].AuditedTime.substring(0, index2) + " " + array[i].AuditedTime.substring(index2 + 1, index2 + 9);
				}
			},
			//刷新
			reloadDatas() {
				this.loading = true;
				var param = {
					isautied: this.audited,
					index: this.currentPage,
					pagesize: this.pageSize
				}
				HttpServer.httpPost.call(this, '/Api/LedResource/GetResource', param, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.formateData(response.data.info);
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
						this.$notify({
							title: '成功',
							message: this.$t('message.refreshSuccess'),
							type: 'success',
							duration: 2500
						});
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			getDatas() {
				this.loading = true;
				var param = {
					isautied: this.audited,
					index: this.currentPage,
					pagesize: this.pageSize
				}
				HttpServer.httpPost.call(this, '/Api/LedResource/GetResource', param, function(response) {}, function(response) {
					// console.log(response)
					this.loading = false;
					if(response.data.code === 0) {
						this.formateData(response.data.info);
						this.tableData = response.data.info;
						this.totalSize = response.data.total;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
		},
		created() {
			this.getDatas();
		}
	}
</script>
<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
</style>